<script setup lang="ts">
import { useRouter } from 'vue-router'

//1. 一定有的功能：返回图标，返回效果，固定定位（组件内部实现）
const router = useRouter()
const onClickLeft = () => {
  // 优先执行传进来的事件
  if (props.back) {
    return props.back()
  }
  // 判断历史记录中是否有回退
  if (history.state?.back) {
    router.back()
  } else {
    router.push('/')
  }
}

// 2. 使用组件时候才能确定的功能：标题，右侧文字，点击右侧文字行为（props传入）
const props = defineProps<{
  title?: string
  rightText?: string
  back?: () => void
}>()
const emit = defineEmits<{
  (e: 'clickRight'): void
}>()
const onClickRight = () => {
  emit('clickRight')
}
</script>

<template>
  <div class="navbar">
    <van-nav-bar
      fixed
      :title="title"
      :right-text="rightText"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  :deep(span.van-nav-bar__text) {
    font-size: 15px;
    font-weight: 700 !important;
  }
  :deep(.van-nav-bar__arrow) {
    font-size: 18px;
    color: var(--cp-text1);
  }
}
</style>
